<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box1, .box2, .box3{
        width: 100px;
        height: 100px;
    }
    .box1{
        background-color: green;
        float: left;
    }
    .box2{
        background-color: #6d3693;
        float: right;
    }
    .box3{
        background-color: red;
    }
    .clear{
        clear: both;
    }
  </style>
</head>
<body>
<!--
    1:什么是浮动：
        浮动就是让块级标签不独占一行。
        目的（使用场景）：把块级标签元素可以排在一行上
    2：浮动的原理
        就是让元素脱离文档流，不占用标准流
    3：float的属性值：
        left:
        fight:
        none:
    4:浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行
    5：清除浮动
        目的：让后面的元素自动调到下一行
        方法：
            1）添加空标签，并设置样式：clear:both
                clear:left; 清除左浮动
                clear:right; 清除右浮动
                clear:left; 清除左右浮动
                clear:none; 不清除浮动
            2) 在要清除浮动的父级添加样式：overflow：hidden
            3) 在要清除浮动的父级添加伪元素，并设定样式：
                父元素：after{
                    content:"";
                    display:block;
                    clear:both;
                }
-->
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<!--添加空标签-->
<div class="clear"></div>
<div class="box3">盒子3</div>



</body>
</html>